<template>
    <a-card :bordered="false">
        <!-- 查询 -->
         <div class="table-page-search-wrapper">
             <a-form layout="inline" @keyup.enter.native="searchQuery">
                 <a-row :gutter="12">
                     <a-col :md="7" :sm="8">
                         <a-form-item label="字典名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
                             <a-input placeholder="请输入字典名称" v-model="queryParam.dictName"></a-input>
                         </a-form-item>
                     </a-col>
                     <a-col :md="7" :sm="8">
                        <a-form-item label="字典编号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
                             <a-input placeholder="请输入字典编号" v-model="queryParam.dictCode"></a-input>
                        </a-form-item>
                     </a-col>
                      <a-col :md="7" :sm="8">
                         <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                        </span>
                      </a-col>
                 </a-row>
             </a-form>

              <div class="table-operator" style="border-top: 5px">
                <a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>
                <a-button type="primary" icon="download" @click="handleExportXls('字典信息')">导出</a-button>
                <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" @change="handleImportExcel">
                <a-button type="primary" icon="import">导入</a-button>
                </a-upload>
                <a-button type="primary" icon="sync" @click="refleshCache()">刷新缓存</a-button>
                <a-button type="primary" icon="hdd" @click="openDeleteList">回收站</a-button>
              </div>

                 <a-table
                    ref="table"
                    rowKey="id"
                    size="middle"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    @change="handleTableChange">
                    <span slot="action" slot-scope="text, record">
                    <a @click="handleEdit(record)">
                        <a-icon type="edit"/>
                        编辑
                    </a>
                    <a-divider type="vertical"/>
                    <a @click="editDictItem(record)"><a-icon type="setting"/> 字典配置</a>
                    <a-divider type="vertical"/>
                    <a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.id)">
                        <a>删除</a>
                    </a-popconfirm>
                    </span>
                </a-table>
         </div>
         <dict-form ref="modalForm" @ok="modalFormOk"> </dict-form>
    </a-card>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { queryDictList } from '@/mock'
import DictForm from './form/DictForm.vue'
export default {
    name: '',
    components: {DictForm},
    data() {
        return {
               queryParam: {
                 dictCode: "",
                 dictName: "",
                },
              columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 120,
                    align: "center",
                    customRender: function (t, r, index) {
                    return parseInt(index) + 1;
                    }
                },
                {
                    title: '字典名称',
                    align: "left",
                    dataIndex: 'dictName',
                },
                {
                    title: '字典编号',
                    align: "left",
                    dataIndex: 'dictCode',
                },
                {
                    title: '描述',
                    align: "left",
                    dataIndex: 'description',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    scopedSlots: {customRender: 'action'},
                }
              ],
              labelCol: {
                    xs: {span: 8},
                    sm: {span: 5},  
              },
             wrapperCol: {
                xs: {span: 16},
                sm: {span: 19},
             },
        }
    },
    mixins: [JeecgListMixin],
    methods: {
        handleTableChange() {},
        openDeleteList() {},
        getAction() {
              return new Promise(resolve=>{
                  queryDictList().then(res=>{
                    if(res.success) {
                      resolve( res.result);
                    }
                })
            })
        }
    }
}
</script>
<style scoped>
 @import '../../../assets/less/common.less'
</style>